<template>
	<view class="tipofft-typs">
		<radio-group class="tipofft-typs-group" @change="change">
			<view class="tipofft-typs-item">
				<view class="tipofft-typs-item-container">
					<view class="uni-list-item-content"><text class="uni-list-item-title">请选择举报原因</text></view>
				</view>
			</view>
			<view v-for="(item, index) in tipTypes" :key="index" class="tipofft-typs-item">
				<view class="tipofft-typs-item-container">
					<view class="uni-list-item-content">
						<text class="tipofft-typs-item-title">{{ item.text }}</text>
					</view>
					<view><radio :value="item.value" :checked="item.checked" /></view>
				</view>
			</view>
		</radio-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tipTypes: [
				{
					text: '发广告',
					value: 1,
					checked: false
				},
				{
					text: '骚扰/谩骂/不文明聊天',
					value: 2,
					checked: false
				},
				{
					text: '虚假照片',
					value: 3,
					checked: false
				},
				{
					text: '色情低俗',
					value: 4,
					checked: false
				},
				{
					text: '欺骗行为',
					value: 5,
					checked: false
				},
				{
					text: '其他行为',
					value: 6,
					checked: false
				}
			]
		};
	},
	methods: {
		change(e) {
			let type =  this.tipTypes.find(type=>{
				return e.detail.value===type.value
			});
			this.$emit('change',type.text);
		}
	}
};
</script>

<style lang="less" scoped>
.tipofft-typs {
	background-color: #eff0f2;
	padding-bottom: 20rpx;

	.tipofft-typs-group {
		& > view:first-child {
			font-weight: 700;
			font-size: 30rpx;
		}

		background-color: #fff;

		.tipofft-typs-item {
			padding: 15rpx 40rpx;
			border-bottom-style: solid;
			border-bottom-width: 1rpx;
			border-bottom-color: #eeeeee;

			.tipofft-typs-item-container {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				flex: 1;
				position: relative;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.tipofft-typs-item-title {
				font-size: 30rpx;
			}
		}
	}
}


/deep/ .uni-radio-wrapper .uni-radio-input-checked {
	background-color: #f85f8f !important;
	color: #ffffff !important;
	border: none;
}
/deep/  .uni-radio-wrapper {
	width: 100%;
}
</style>
